<template>
  <div class="study-plan-card">
    <div class="card-header">
      <h2>学习计划</h2>
      <button class="edit-toggle-btn" @click="toggleEdit">
        {{ isEditing ? '完成编辑' : '✏️ 编辑' }}
      </button>
    </div>
    
    <div class="subjects-grid">
      <div v-for="(subject, index) in subjects" :key="subject.name" class="subject-item">
        <div class="subject-header">
          <div class="subject-icon">{{ subject.icon }}</div>
          <h3 v-if="!isEditing">{{ subject.name }}</h3>
          <input 
            v-else 
            v-model="subject.name" 
            class="edit-input name-input"
            placeholder="科目名称"
          />
        </div>
        
        <div v-if="!isEditing" class="progress-info">
          <div class="progress-text">
            <span>{{ subject.completed }}/{{ subject.total }} 章节</span>
            <span>{{ subject.progress }}%</span>
          </div>
          <div class="progress-bar">
            <div 
              class="progress-fill" 
              :style="{ width: subject.progress + '%', background: subject.color }"
            ></div>
          </div>
        </div>
        
        <div v-if="!isEditing" class="next-task">
          <small>下一任务: {{ subject.nextTask }}</small>
        </div>
        
        <div v-if="isEditing" class="edit-form">
          <div class="edit-row">
            <label>完成章节:</label>
            <input 
              v-model.number="subject.completed" 
              type="number" 
              min="0"
              class="edit-input small-input"
            />
          </div>
          <div class="edit-row">
            <label>总章节:</label>
            <input 
              v-model.number="subject.total" 
              type="number" 
              min="1"
              class="edit-input small-input"
            />
          </div>
          <div class="edit-row">
            <label>下一任务:</label>
            <input 
              v-model="subject.nextTask" 
              class="edit-input"
              placeholder="下一任务内容"
            />
          </div>
          <button @click="removeSubject(index)" class="remove-btn">删除</button>
        </div>
      </div>
    </div>
    
    <div v-if="isEditing" class="add-subject">
      <button @click="addSubject" class="add-btn">+ 添加科目</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const isEditing = ref(false)

const defaultSubjects = [
  {
    name: '数学',
    icon: '📐',
    completed: 8,
    total: 12,
    progress: 67,
    color: '#ff6b6b',
    nextTask: '概率论第三章'
  },
  {
    name: '英语',
    icon: '📚',
    completed: 15,
    total: 20,
    progress: 75,
    color: '#4ecdc4',
    nextTask: '阅读理解练习'
  },
  {
    name: '政治',
    icon: '📖',
    completed: 5,
    total: 10,
    progress: 50,
    color: '#45b7d1',
    nextTask: '马原复习'
  },
  {
    name: '专业课',
    icon: '💻',
    completed: 6,
    total: 8,
    progress: 75,
    color: '#96ceb4',
    nextTask: '数据结构算法'
  }
]

const subjects = ref([])

// 从localStorage加载数据
const loadSubjects = () => {
  const saved = localStorage.getItem('studyPlan')
  if (saved) {
    try {
      subjects.value = JSON.parse(saved)
    } catch (e) {
      console.error('加载学习计划数据失败:', e)
      subjects.value = [...defaultSubjects]
    }
  } else {
    subjects.value = [...defaultSubjects]
  }
}

// 保存到localStorage
const saveSubjects = () => {
  localStorage.setItem('studyPlan', JSON.stringify(subjects.value))
}

// 监听数据变化并保存
watch(subjects, () => {
  saveSubjects()
}, { deep: true })

const toggleEdit = () => {
  isEditing.value = !isEditing.value
  // 重新计算进度
  subjects.value.forEach(subject => {
    subject.progress = Math.round((subject.completed / subject.total) * 100)
  })
}

const addSubject = () => {
  const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd']
  subjects.value.push({
    name: '新科目',
    icon: '📚',
    completed: 0,
    total: 10,
    progress: 0,
    color: colors[Math.floor(Math.random() * colors.length)],
    nextTask: '待添加'
  })
}

const removeSubject = (index) => {
  subjects.value.splice(index, 1)
}

// 初始化加载
loadSubjects()
</script>

<style scoped>
.study-plan-card {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  border-radius: 20px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.card-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.edit-toggle-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.edit-toggle-btn:hover {
  transform: translateY(-2px);
}

.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.subject-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.subject-item:hover {
  transform: translateY(-5px);
}

.subject-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.subject-icon {
  font-size: 30px;
  margin-right: 10px;
}

.subject-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.progress-info {
  margin-bottom: 10px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 3px;
}

.next-task {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.edit-row label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  min-width: 80px;
}

.edit-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  color: white;
  font-size: 14px;
  flex: 1;
}

.edit-input:focus {
  outline: none;
  border-color: #667eea;
}

.name-input {
  font-size: 18px;
  font-weight: 600;
}

.small-input {
  width: 60px;
  text-align: center;
}

.remove-btn {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.remove-btn:hover {
  background: rgba(244, 67, 54, 0.3);
}

.add-subject {
  margin-top: 20px;
  text-align: center;
}

.add-btn {
  background: rgba(100, 255, 218, 0.2);
  color: #64ffda;
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.add-btn:hover {
  background: rgba(100, 255, 218, 0.3);
}
</style>